<template>
  <el-card>
    <h2 v-if="isShow">当前选择的客户端ID: {{ props.id }}</h2>
    <h2 v-if="isShow">实际时间: {{ time }}</h2>
  </el-card>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue'

const time = ref('')

const props = defineProps({
  id: {
    type: Number,
    required: true
  },
  isShow: {
    type: Boolean,
    required: false,
    default: true
  }
})

let webSocketListener // 保存WebSocket事件监听器的引用
onMounted(() => {
  const webSocket = window.api.getWebSocket()
  webSocketListener = (event, message) => {
    const parsedMessage = JSON.parse(message)
    if (parsedMessage.type === 'time') {
      const data = JSON.parse(parsedMessage.data)
      if (data.id === props.id) {
        time.value = data.data
      }
    }
  }
  webSocket.on(webSocketListener)
})

onUnmounted(() => {
  // 移除WebSocket时间监听
  // const webSocket = window.api.getWebSocket()
  // webSocket.removeListener(webSocketListener)
})
</script>

<style scoped>
h2 {
  color: #333;
}
</style>
